import React, { Component } from 'react';
import { Switch, message } from 'antd';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { getMessageSettings, setAccount } from '@api/user';
import EmailImage from './images/mailbox-notify.svg';
import MessageImage from './images/message-notify.svg';
import ModalNoticeImage from './images/modal-notice.svg';
import { connect } from 'react-redux';
import './index.less';

const prefixCls = 'message-setting';

const MessageNotifyDiv = props => {
  const { title, message, image, isSelected, onChange } = props;
  return (
    <div className={`${prefixCls}-auth-item`}>
      <div className={`${prefixCls}-auth-item-cont`}>
        <img src={image} style={{ float: 'left' }} />
        <div className={`${prefixCls}-auth-item-cont-title`}>
          <h3 className={`${prefixCls}-auth-item-head`}>
            <span>{title}</span>
          </h3>
          <p className={`${prefixCls}-auth-item-desc`}>{message}</p>
        </div>
      </div>
      <Switch checked={isSelected} size="small" style={{ marginLeft: 8 }} onChange={onChange} />
    </div>
  );
};

MessageNotifyDiv.propTypes = {
  title: PropTypes.string.isRequired,
  message: PropTypes.string.isRequired,
  image: PropTypes.object.isRequired,
  isSelected: PropTypes.boolean,
  onChange: PropTypes.function
};

class MessageSetting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isMessageNotify: true,
      isEmailNotify: true,
      isModalNotify: true
    };
  }

  static propTypes = {
    certModules: PropTypes.array
  };

  componentDidMount() {
    this.getMessageNotify();
  }

  //获取当前的通知状态（开启或关闭）
  getMessageNotify = () => {
    getMessageSettings().then(res => {
      const data = res.data.data.data;
      this.setState({
        isMessageNotify: _.get(data, 'isMessageNotify', true),
        isEmailNotify: _.get(data, 'isEmailNotify', true),
        isModalNotify: _.get(data, 'isModalNotify', true)
      });
    });
  };

  setMessageNotify = (notifyType, checked) => {
    let body = {};
    body[notifyType] = JSON.stringify(checked);
    this.setState({ loading: true });
    setAccount(body)
      .then(() => {
        message.success('修改成功');
        this.setState({
          loading: false
        });
      })
      .catch(() => {
        this.setState({ loading: false });
      });
  };

  render() {
    const { isMessageNotify, isEmailNotify, isModalNotify } = this.state;
    const { certModules = [] } = this.props;
    return (
      <div className={`${prefixCls}`}>
        <div className={`${prefixCls}-title`}>通知方式设置</div>
        {_.indexOf(certModules, 'personal|message|sms') !== -1 && (
          <MessageNotifyDiv
            title="短信通知"
            message="开启后系统会发送短信提醒您有新消息"
            image={MessageImage}
            isSelected={isMessageNotify}
            onChange={checked =>
              this.setState({ isMessageNotify: checked }, () =>
                this.setMessageNotify('isMessageNotify', checked)
              )
            }
          />
        )}
        <MessageNotifyDiv
          title="邮件通知"
          message="开启后系统会发送邮件提醒您有新消息"
          image={EmailImage}
          isSelected={isEmailNotify}
          onChange={checked =>
            this.setState({ isEmailNotify: checked }, () =>
              this.setMessageNotify('isEmailNotify', checked)
            )
          }
        />
        <MessageNotifyDiv
          title="站内弹框通知"
          message="开启后系统会发送站内弹框提醒您有新消息"
          image={ModalNoticeImage}
          isSelected={isModalNotify}
          onChange={checked =>
            this.setState({ isModalNotify: checked }, () =>
              this.setMessageNotify('isModalNotify', checked)
            )
          }
        />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    certModules: _.get(state, 'auth.cert.modules', [])
  };
};

export default connect(
  mapStateToProps,
  null
)(MessageSetting);
